<template>
  <NavBarVue :title="details?.articleTitle"/>
  <view class="top">
    <view class="zuo" style="display: flex;align-items: center;">
      <view class="ttop">
        <view class="tx">
          <base-cover-image :src="details?.userPic"/>
        </view>
        <view style="padding-left: 5px;">
          <view style="font-size: 28rpx; font-weight: 600;" @click="toPersonalIndex()">{{details?.userName}}</view>
          <view style="color:#ccc; display: flex;" @click="toActivityDeatils">
            <u-icon name="map" size="18" color="#ccc"></u-icon>
            <view style="font-size:24rpx;">{{details?.activityWord}}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 关注 -->
    <view class="you" style="display: flex;">
      <view class="gz" @click="attention">关注</view>
      <image class="share" src="/static/share.png" @click="show = true"/>
    </view>
  </view>
  <view class="zong">
    <view class="box">
      <!-- 底部弹框 -->
      <u-popup :show="show" customStyle="border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;" mode="bottom"
               bgColor="#f3f3f3" @close="close" @open="open">
        <view>
          <view class="titf">
            <text>分享至</text>
          </view>
          <view class="icons">
            <view class="icoul">
              <view class="icoli" v-for="item in shal" :key="item.id">
                <base-cover-image :src="''"/>
                <view>{{item.name}}</view>
              </view>
            </view>
          </view>
          <button @click="close" style="font-size: 28rpx;height: 120rpx;">取消</button>
        </view>
      </u-popup>
      <!--0元购车弹框-->
      <u-popup class="gocar" :show="shows" @close="closes" @open="opens"
               customStyle="border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;">
        <view class="goucar">
          <view class="goucar_img">
            <base-cover-image :src="details?.articleMainPic"/>
          </view>
          <view class="botgcar">
            <view class="lefgcar">
              <view style="font-weight: 600;font-size: 40rpx;">{{details?.activityWord}}</view>
              <view style="font-size: 24rpx;color:#999;margin-top: 5rpx;">{{details?.articleLabel}}</view>
            </view>
            <view class="btn" @click="getCoupon">获取优惠券</view>
          </view>
        </view>
      </u-popup>
      <view class="snr">
        <swiper class="lunb" indicator-dots indicator-color="#fff" indicator-active-color="red" autoplay interval="2000"
                circular>
          <swiper-item v-for="(item, idx) in [details?.articleCover]" :key="idx">
            <view class="item">
              <image :src='item'/>
              <button class="items" @click="shows= true" v-if="details?.source == 2">
                {{ details?.activityWord }}
              </button>
            </view>
          </swiper-item>
        </swiper>
        <view class="nr">
          <view style="font-size:32rpx;font-weight:500;color:#6D6D6D;margin:16rpx 0rpx">
            {{details?.articleTitle}}
          </view>
          <view style="font-size: 28rpx;color:#666;margin-bottom: 28rpx;">
            {{details?.articleDetail}}
          </view>
          <view style="font-size:28rpx;color:#333333">{{details?.articleDigest}}</view>
          <view>
            <base-cover-image :src="details?.articleMainPic"/>
          </view>
          <view class="aas">
            <span>{{showDate}}</span>
            <span>{{cityName}}</span>
          </view>
          <view class="plas">共计{{1000}}条评论</view>
          <view class="ping">
            <view class="tx">
              <base-cover-image :src="details?.userPic"/>
            </view>
            <!-- input -->
            <input type="text" class="ping_inp" placeholder="爱评论的人运气不会差" style="height: 72rpx;"/>
          </view>

          <view class="ping" v-for="item in plist" :key="item.id">
            <!-- 头像 -->
            <view class="tx">
              <base-cover-image :src="item.imgs"/>
            </view>
            <!-- 右侧内容 -->
            <view class="yoww">
              <view class="yoww_con">
                <div class="con">
                  <view class="yoww_name">{{item.name}}</view>
                  <!-- <view class="" style="display: flex;"> -->
                  <span style="font-size: 28rpx; color:#666">{{item.nr}}</span>
                  <span class="sjtim">{{item.time}}</span>
                </div>
                <view class="lick">
                  <u-icon name="heart" style="margin-left: 22rpx" color="#ccc" size="18"></u-icon>
                  <view style="font-size: 28rpx; color:#999">{{item.zan}}</view>
                </view>
              </view>

              <view class="ping" v-for="item in plist" :key="item.id">
                <!-- 头像 -->
                <view class="child_tx">
                  <base-cover-image :src="item.imgs"/>
                </view>
                <!-- 右侧内容 -->
                <view class="yoww">
                  <view class="yoww_con">
                    <div class="con">
                      <view class="yoww_name">{{item.name}}</view>
                      <!-- <view class="" style="display: flex;"> -->
                      <span style="font-size: 28rpx; color:#666">{{item.nr}}</span>
                      <span class="sjtim">{{item.time}}</span>
                    </div>
                    <view class="lick">
                      <u-icon name="heart" style="margin-left: 20rpx" color="#ccc" size="22"></u-icon>
                      <view style="font-size: 28rpx; color:#999">{{item.zan}}</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom"
          :style="{display: 'flex', paddingBottom: safeAreaBottom + 20 + 'rpx', zIndex: 100, height: 112 + safeAreaBottom + 'rpx'}">
      <view class="cbds">
        <input type="text" placeholder="发条有爱评论～"/>
      </view>
      <view style="display: flex;justify-content: space-between;">
        <view class="bottom_list" @click="likeCountClick">
          <!-- <u-icon name="heart" color="#ccc" size="24"></u-icon> -->
          <up-icon name="heart" v-if="!details?.islike" color="#ccc" size="24"></up-icon>
          <up-icon name="heart-fill" color="#ff546a" v-else size="24"></up-icon>
          <view style="font-size: 24rpx; color:#777777; margin-left: 10rpx;">{{details?.likeCount}}</view>
        </view>
        <view class="bottom_list" @click="favoriteCountClick">
          <u-icon name="star" v-if="!details?.isfavorite" color="#ccc" size="24"></u-icon>
          <u-icon name="star-fill" color="#ff546a" size="24" v-else></u-icon>
          <view style="font-size: 24rpx; color:#777777; margin-left: 10rpx;">{{details?.favoriteCount}}</view>
        </view>
        <!-- 				<view class="bottom_list">
                  <u-icon name="chat" color="#ccc" size="24"></u-icon>
                  <view style="font-size: 24rpx; color:#777777">{{details?.ptxt}}</view>
                </view> -->
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {computed, onMounted, reactive, ref} from "vue"
import {useUserReceive, useArticleStore} from '@/store'
import {
  onLoad
} from "@dcloudio/uni-app"
import {formatTime} from '@/utils/formatDate'
import {getLocationFunc} from '@/utils/getLocation'
import {
  safeAreaBottom
} from '@/utils/getMenuData'

const articleStore = useArticleStore()
//显示隐藏
const show = ref(false)
const shows = ref(false)
const open = () => {
  show.value = true
}
const close = () => {
  show.value = false
}
const opens = () => {
  shows.value = true
}
const closes = () => {
  shows.value = false
}
const onback = () => {
  uni.navigateBack({
    delta: 2
  });
}
const toPersonalIndex = () => {
  uni.navigateTo({
    url: `/pages/tab-index/personal/index?id=${details.value?.userId}&source=${details.value?.source}`
  })
}
const toActivityDeatils = () => {
  if (details?.value?.activityId == 0) {
    return
  }
  uni.navigateTo({
    url: `/pages/tab-index/personal/activity-details/index?id=${details.value?.activityId}&origin=normal`
  })
}
const userReceive = useUserReceive()
// 用户获取优惠劵
const getCoupon = async () => {
  const res = await userReceive.userReceiveSave({
    "activityId": details.value?.activityId,
    "couponCode": "",
    "couponId": 0,
    "receiveChannel": 0,
    "shopId": details.value?.shopId,
    "userId": details.value?.userId
  })
  console.log(res, "| res");
  if (res?.code === '0') {
    uni.showModal({
      content: '领券成功',
      showCancel: false,
      success: () => {
        shows.value = false
      }
    })
  }
}
let Id = ref(null)
onLoad((e) => {
  Id.value = e.id
})
let cityName = ref('')
let details = computed(() => {
  return articleStore.articleDetailData.details;
})
let showDate = ref('')
onMounted(async () => {
  await articleStore.articleDetail({id: Id.value})
  showDate.value = formatTime(details.value?.updateTime)
  getLocationFunc({
    cityName: '',
    latitude: details.value?.latitude,
    longitude: details.value?.longitude
  }).then((res) => {
    cityName.value = res?.cityName
  })
})

// 关注
const attention = () => {
  uni.showToast({
    title: "关注"
  })
}
const plist = reactive([
  {
    id: 0,
    name: '王晓晓',
    nr: "下地铁再走两步就到",
    zan: "650",
    imgs: "/static/images/1002.png",
    time: "",
    btnone: "作者赞过",
    btntwo: "作者",
  },
  {
    id: 1,
    name: '李红达',
    nr: "改天去看热水的风险二个好人是古代中国合同黑色红色看",
    zan: "350",
    imgs: "/static/images/1003.png",
    time: ""
  },
  {
    id: 2,
    name: '王大拿',
    nr: "啊hers公噶尔给人打工司如果输入格式的",
    zan: "550",
    imgs: "/static/images/1004.png",
    time: "前天：18:18"
  },
  {
    id: 3,
    name: '陈莉莉',
    nr: "走，出热色赫特河阿惹萨二世灌水灌水发",
    zan: "250",
    imgs: "/static/images/1005.png",
    time: "前天：18:18"
  },
  {id: 4, name: '李红达', nr: "改天去看看", zan: "350", imgs: "/static/images/1006.png", time: "前天：18:18"},
])

// 点赞
const likeCountClick = async () => {
  console.log("likeCountClick");
  const res = await articleStore.articleBehavior({
    id: Id.value,
    behavior: 1,
    action: 1
  })
  articleStore.articleDetailData.details.likeCount = articleStore.articleDetailData.details.likeCount + 1
  articleStore.articleDetailData.details.islike = true
  if (res?.success) {
    uni.showToast({
      title: res?.message
    })
  } else {
    uni.showToast({
      title: res?.message
    })
  }
}

// 收藏
const favoriteCountClick = async () => {
  const res = await articleStore.articleBehavior({
    id: Id.value,
    behavior: 2,
    action: 2
  })
  articleStore.articleDetailData.details.favoriteCount = articleStore.articleDetailData.details.favoriteCount + 1
  articleStore.articleDetailData.details.isfavorite = true
  if (res?.success) {
    uni.showToast({
      title: res?.message
    })
  } else {
    uni.showToast({
      title: res?.message
    })
  }
}
</script>


<style lang="scss" scoped>
.zong {
  width: 100vw;
  // height: 100vh;
  overflow: hidden;
  padding-bottom: 150rpx;
  font-family: PingFangSC, PingFang SC;
}

.login_top {
  margin-top: 40rpx;
  height: 40px;
  display: flex;
  align-items: center;

  .top_p {
    flex: 1;
    text-align: center;
    font-weight: bold;
  }
}

.botgcar {
  height: 156rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rpx 48rpx;

  .btn {
    width: 296rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: linear-gradient(270deg, #FB7685 0%, #FF4D65 100%);
    color: white;
    font-size: 28rpx;
    border-radius: 40rpx;
    text-align: center;
  }
}

.gcar {
  width: 100vw;
  height: auto;
  box-sizing: border-box;
  padding: 30rpx;
}

.goucar {
  width: 100%;
  height: auto;
  box-sizing: border-box;

  .goucar_img {
    background-color: #F3F3F3;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
  }
}

.goucar image {
  width: 686rpx;
  height: 896rpx;
  margin: 32rpx;
  border-radius: 16rpx;

}

// 轮播样式---------------
.lunb {
  height: 422rpx;
}

.lunb .item {
  height: 100%;
  text-align: center;
  line-height: 400rpx;
  position: relative;

}

swiper-item:nth-child(1) .item {
  background-color: skyblue;

}

swiper-item:nth-child(2) .item {
  background-color: pink;
}

swiper-item:nth-child(3) .item {
  background-color: purple;
}

.item image {
  width: 100%;
  height: 100%;

}

.items {
  position: absolute;
  bottom: 30rpx;
  left: 30rpx;
  color: #fff;
  font-size: 24rpx;
  width: 160rpx;
  height: 60rpx;
  line-height: 60rpx;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  border: 2rpx solid #fff;
}

//-----------------------

.top {
  width: 100%;
  height: 88rpx;
  background: white;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0rpx 20rpx;
}

.box {
  width: 100vw;
  // height: calc(100vh - 120rpx);
  overflow: hidden;
  box-sizing: border-box;
  padding: 10rpx 0rpx;
}

.titf {
  width: 100vw;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}

.icons {
  width: 100vw;
  height: auto;
  box-sizing: border-box;
  padding: 22rpx;

  .icoul {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;

    .icoli {
      width: 120rpx;
      height: 120rpx;
      font-size: 24rpx;
      text-align: center;
      margin-top: 30rpx;
      margin-right: 20rpx;

      image {
        width: 80rpx;
        height: 80rpx;
      }
    }
  }
}

.snr {
  width: 100%;

  // height: calc(100vh - 120rpx);
  // overflow: auto;
  .nr {
    padding: 32rpx;
  }
}

.sjtim {
  margin-left: 20rpx;
  color: #ccc;
  font-size: 24rpx;
}

.tx {
  width: 72rpx;
  height: 72rpx;
  border-radius: 36rpx;
  margin-right: 8rpx;
}

.ttop {
  width: 400rpx;
  display: flex;
  font-size: 24rpx;
  margin-left: 20rpx;
}

.you {
  line-height: 100rpx;
  height: 100rpx;

}

.share {
  width: 46rpx;
  height: 46rpx;
  margin-top: 24rpx;
}

.you button {
  width: 160rpx;
  height: 60rpx;
  font-size: 28rpx;
  background: rgb(90, 144, 226);
  border-radius: 40rpx;
}

.gz {
  margin-right: 20rpx;
  margin-top: 10px;
  width: 120rpx;
  height: 55rpx;
  line-height: 55rpx;
  font-size: 28rpx;
  color: white;
  text-align: center;
  border-radius: 30rpx;
  background: linear-gradient(270deg, #FB7685 0%, #FF4D65 100%);
}

.lick {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0rpx 5rpx;
}


.ping {
  width: 100%;
  height: auto;
  display: flex;
  margin-top: 20rpx;
  // align-items: center;
  box-sizing: border-box;

  // padding:0rpx 30rpx;
  .child_tx {
    height: 48rpx;
    width: 48rpx;
  }
}

.yoww {
  font-size: 24rpx;
  width: 87%;
  box-sizing: border-box;
  padding-left: 30rpx;
  // align-items: center;
  justify-content: space-between;
  flex: 1;

  /* background: blue; */
  .yoww_con {
    flex: 1;
    display: flex;

    .con {
      flex: 1;
    }

    .yoww_name {
      font-size: 24rpx;
      color: #ccc
    }

  }
}


.plas {
  font-size: 26rpx;
  color: #666;
  padding: 20rpx 0rpx;
}

.aas {
  font-size: 24rpx;
  color: #cccccc;
  padding: 30rpx 0rpx;
  border-bottom: 2rpx solid #EAEAEA;
}


.ping_inp {

  margin-left: 30rpx;
  height: 72rpx;
  line-height: 70rpx;
  font-size: 24rpx;
  flex: 1;
  background-color: #F5F5F5;
  border-radius: 36rpx;
  padding-left: 50rpx;

}


.bottom {
  width: 100%;
  height: 112rpx;
  padding: 20rpx 20rpx 0rpx;
  border-top: 2rpx solid #EAEAEA;
  background: white;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0rpx;

  .bottom_list {
    display: flex;
    margin-right: 10px;
    align-items: center;
  }
}

.cbds {
  box-sizing: border-box;
  padding: 15rpx 30rpx;
  background: #f2f2f2;
  border-radius: 40rpx;
  font-size: 24rpx;
}

.pltwo {
  .btnone {
    width: 110rpx;
    height: 60rpx;
    font-size: 24rpx;
  }
}
</style>